import { Col, Row } from 'antd';
import MoneyIcon from '@/assets/icons/money-icon.png';
import React, { useEffect, useState } from "react";
import './index.scss';
import { get_user_trade, get_user_reward } from '@/utils/mixin.ts'
import zjyl from '@/assets/new/zjyl.png'
import fjyl from '@/assets/new/fjyl.png'
import sxfjl from '@/assets/new/sxfjl.png'
import nftjl from '@/assets/new/nftjl.png'

const SixMoney = () => {
       const [trade, setTrade] = useState([]);     
       const [reward, setReward] = useState([]);
       // useEffect 第二个参数为空数组表示仅在组件挂载时执行
           // useEffect 第二个参数为空数组表示仅在组件挂载时执行
        useEffect(() => {
            // 这里是 componentDidMount 的逻辑
            // console.log("Component is mounted");
            // const res = get_platform_trade({currency: 'BNB'})
            
            // 如果有清理逻辑，例如清理定时器，可以在这里添加
            // return () => {
            //   console.log("Component will unmount");
            //   // 清理逻辑
            // };
            const fetchData = async () => {
                try {

                    const res1 = await get_user_trade({ email: localStorage.getItem('email') });
                    setTrade(res1.data);

                    const res2 = await get_user_reward({ email: localStorage.getItem('email') });
                    setReward(res2.data);

                } catch (error) {
                    console.error("Error fetching data:", error);
                }
            };

            fetchData(); // 组件挂载时执行一次
      }, []);  // 空数组表示只在组件挂载时执行


    return (
        <Row className="every-part-pc" gutter={[16, 0]}>
            <Col md={24} xl={12}>
                <Row className="money-count">
                    <Col className="money-countBox">
                        <img src={zjyl} alt="" className="money-count-img" />
                    </Col>
                    <Col md={24} xl={12} className="money-count-info">
                        <Col className="money-count-title">主交易量</Col>
                        <Col className="money-count-num">{trade.length ? trade[0].big_zone_volume : '0.00'}</Col>
                    </Col>
                </Row>
            </Col>
            <Col md={24} xl={12}>
                <Row className="money-count">
                    <Col className="money-countBox">
                        <img src={fjyl} alt="" className="money-count-img" />
                    </Col>
                    <Col md={24} xl={12} className="money-count-info">
                        <Col className="money-count-title">副交易量</Col>
                        <Col className="money-count-num">{trade.length ? trade[0].small_zone_volume: '0.00'}</Col>
                    </Col>
                </Row>
            </Col>
            <Col md={24} xl={12}>
                <Row className="money-count">
                    <Col className="money-countBox">
                        <img src={sxfjl} alt="" className="money-count-img" />
                    </Col>
                    <Col md={24} xl={12} className="money-count-info">
                        <Col className="money-count-title">手续费奖励</Col>
                        <Col className="money-count-num">{reward.length ? reward[0].refer_reward : '0.00'}</Col>
                    </Col>
                </Row>
            </Col>
            <Col md={24} xl={12}>
                <Row className="money-count">
                    <Col className="money-countBox">
                        <img src={nftjl} alt="" className="money-count-img" />
                    </Col>
                    <Col md={24} xl={12} className="money-count-info">
                        <Col className="money-count-title">NFT奖励</Col>
                        <Col className="money-count-num">{reward.length ? reward[0].nft_reward : '0.00'}</Col>
                    </Col>
                </Row>
            </Col>
        </Row>
    );
};

export default SixMoney;
